import { Avatar, Divider, List, Skeleton } from "antd";
import { useEffect, useRef } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { useNavigate } from "react-router-dom";
import { Operation } from "../operation";
import styles from "./index.module.scss";
interface Props {
	data: any[];
	loadMoreData: () => Promise<any> | void;
	loading: boolean;
	total?: number;
	children?: any;
	handleClick?: (id: string, str: string, value?: boolean) => void;
}

const Index = ({
	data,
	loadMoreData,
	loading,
	total = 999,
	handleClick,
	children,
}: Props) => {
	const navigate = useNavigate();
	const scrollRef = useRef<HTMLDivElement>(null);
	useEffect(() => {
		loadMoreData();
	}, []);

	return (
		<div className={styles.root}>
			<div id="scrollableDiv" ref={scrollRef}>
				<InfiniteScroll
					// height={600}
					dataLength={data.length}
					next={loadMoreData}
					hasMore={data.length < total}
					// scrollThreshold={0.5}
					loader={
						loading ? <Skeleton avatar paragraph={{ rows: 1 }} active /> : null
					}
					// loader={<h3>jiaziazhong.....</h3>}
					endMessage={<Divider plain>已经没有更多信息了... 🤐</Divider>}
					scrollableTarget="scrollableDiv">
					{children ? (
						children
					) : (
						<List
							itemLayout="vertical"
							size="large"
							dataSource={data}
							// footer={
							//   <div>
							//     <b>ant design</b> footer part
							//   </div>
							// }
							renderItem={(item) => (
								<List.Item
									key={item.title}
									actions={[
										<Operation info={item} onClick={handleClick}></Operation>,
									]}
									extra={
										<img
											width={272}
											alt="logo"
											src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
										/>
									}>
									<List.Item.Meta
										avatar={<Avatar src={item.avatar} />}
										title={
											<a onClick={() => navigate(item.href + item.id)}>
												{item.title}
											</a>
										}
										description={item.description}
									/>
									{item.content}
								</List.Item>
							)}
						/>
					)}
				</InfiniteScroll>
			</div>
		</div>
	);
};

export default Index;
